<template class="enroll">
  <div>
    <canvas class="enroll-canvas" ref="cavs"> </canvas>
    <div class="enroll-over"></div>
    <form action="" class="enroll-from" @submit.prevent="onSubmit">
      <span class="enroll-read-login">
        已注册
        <router-link to="/" class="enroll-to-login">直接登录</router-link>
      </span>
      <input
        type="text"
        v-model="username"
        placeholder="用户名"
        class="enroll-text"
        pattern="\w{4,15}"
        title="用户名为4到15位"
      />
      <input
        type="password"
        v-model="password1"
        placeholder="密码"
        class="enroll-text"
        pattern="\w{6,15}"
        title="密码为6到15位"
      />
      <input
        type="password"
        v-model="password2"
        placeholder="密码"
        class="enroll-text"
        pattern="\w{6,15}"
        title="密码为6到15位"
      />
      <button class="btn">免费注册</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password1: "",
      password2: "",
    };
  },
  methods: {
    onSubmit() {
      const username = this.username;
      const password1 = this.password1;
      const password2 = this.password2;
      axios
        .post("http://localhost:8080/api/enroll", {
          username,
          password1,
          password2,
        })
        .then((response) => {
          const { code, message } = response.data;
          if (code === 0) {
            this.username = "";
            this.password1 = "";
            this.password2 = "";
            alert(message);
          } else if (code === 1) {
            this.username = "";
            this.password1 = "";
            this.password2 = "";
            alert(message);
          } else if (code === 2) {
            this.$router.push("/");
            alert(message);
          }
        });
    },
  },
  mounted() {
    var cavs = this.$refs.cavs;
    var ctx = cavs.getContext("2d");
    // 画板的宽高等于窗口的宽高
    var w = (cavs.width = window.innerWidth);
    var h = (cavs.height = window.innerHeight);
    var cot = 5;
    var RainArr = [];
    window.onresize = function () {
      var w = (cavs.width = window.innerWidth);
      var h = (cavs.height = window.innerHeight);
    };
    function Rain() {}

    Rain.prototype = {
      init: function () {
        this.x = random(1, w);
        this.y = 0;
        this.r = 1;
        this.ySpeed = random(7, 9);
        this.rSpeed = 0.2;
        this.t = 1;
        this.ts = 0.96;
        this.l = random(h * 0.8, h * 0.9);
        this.maxR = random(5, 50);
      },
      draw: function () {
        if (this.y > this.l) {
          var r = Math.floor(Math.random() * 255);
          var g = Math.floor(Math.random() * 255);
          var b = Math.floor(Math.random() * 255);
          ctx.beginPath();
          // 圆心的坐标x,y,起始角度，圆周，false顺时针，true逆时针
          ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
          ctx.strokeStyle = colorRandom(this.t);
          ctx.closePath();
          // 开始作画
          ctx.stroke();
        } else {
          ctx.beginPath();
          ctx.fillStyle = "#ffffff";
          ctx.fillRect(this.x, this.y, 2, 10);
          ctx.closePath();
        }
        this.update();
      },
      // 更新坐标
      update: function () {
        if (this.y > this.l) {
          if (this.t > 0.5) {
            this.r += this.rSpeed;
            if (this.r > this.maxR) {
              this.t *= this.ts;
            }
          } else {
            // return;
            this.init();
          }
        } else {
          this.y += this.ySpeed;
        }
      },
    };

    // 封装随机函数
    function random(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    }
    // var oneRain = new Rain();
    // oneRain.init();

    function move() {
      ctx.beginPath();
      ctx.fillStyle = "rgba(0,0,0,0.1)";
      ctx.fillRect(0, 0, w, h);
      ctx.closePath();
      // oneRain.draw();
      for (var i = 0; i < RainArr.length; i++) {
        RainArr[i].draw();
      }

      window.requestAnimationFrame(move);
    }
    move();

    function createRain() {
      for (var i = 0; i < cot; i++) {
        (function (j) {
          setTimeout(function () {
            var rain = new Rain();
            rain.init();
            RainArr.push(rain);
          }, j * 5);
        })(i);
      }
    }
    createRain();
    move();

    function colorRandom(t) {
      var r = Math.floor(Math.random() * 255);
      var g = Math.floor(Math.random() * 255);
      var b = Math.floor(Math.random() * 255);
      return "rgba(" + r + "," + g + "," + b + "," + t + ")";
    }
  },
};
</script>

<style>
.enroll {
  width: 100%;
  height: 100%;
  position: relative;
}
.enroll-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.enroll-over {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/images/enroll-bg.png");
  opacity: 0.5;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.enroll-from {
  display: flex;
  width: 350px;
  height: 380px;
  background-color: rgba(249, 252, 255, 0.8);
  flex-direction: column;
  border-radius: 3px;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 20;
}
.enroll-text {
  width: 200px;
  height: 32px;
  margin: 0 0 10px 0;
  padding-left: 10px;
  border: 1px solid #ccc;
  outline-color: #4286f4;
  border-radius: 2px;
  caret-color: #4286f4;
}
.enroll-text： {
  padding-left: 5px;
  color: #ccc;
}
.enroll-read-login {
  margin: 40px;
}
.enroll-to-login {
  text-decoration: none;
}
</style>